.
VR
ElderDaniel's Journal


ElderDaniel's Journal

THIS JOURNAL IS ON 72 FAVORITE JOURNAL LISTS

Honor: 0    [ Give / Take ]

PROFILE



2 entries this month
 

<HTML> for Premies I: Media Linking

21:23 Mar 11 2005
Times Read: 1,142


[ Premies Cheat Sheet | for Mosquitos | for Whelps ]




VampireRave Premium Members now have access to some cool new features. Not only do these add extra options like email addresses, but this access also allows for the use of some extra HTML tags for Profiles. These tags are normally not allowed by many webforums because they can be abused. This is the case which both additions Cancer has made available. Since you are paying for Premium access however, I hope you will respect their use online.



I will be splitting up my coverage of both major additions into two seperate articles. The next article will cover Cascading Style Sheets, or CSS, which is used to spruce up your Profile page. This article however deals with another feature just for Profiles, the embedding of music and/or video files into your profile.



First, I'll talk about the different standards for media. Then I will give a breakdown of each method for embedding media, from easiest to most complex. Please note, as this file is in my journal, I cannot have working examples. I'll include some in my profile, but for now, you'll just have code samples and will have to try them yourself on your profile to test them out.



Also, don't forget, all of the media files that you want to embed need to be hosted on other servers and linked with full web addresses to those other sites.



Web-browser standards

There aren't any. OK, that's sarcasm, but it ain't far from the truth. Fact is, there are too many standards and the best you can do is pick popular ones and hope for the best. For example, there are a dozen sound file formats, but most browsers will gladly play .MID, .WAV, or .MP3 files for you.



.mid or MIDI files are an old standard for programming external music synthesizers that were also adopted for playing music on a PC. These consist of text files that tell which note, sustain, and duration to play. These files sound "synthesized" or "canned" and have no sung lyrics as a result. Their chief benefit is wide public availability and compact size.



.wav files were developed my Microsoft for playing sound and music on Windows. They are sampled data straight from a sound source. Depending on the quality they are sampled at, these can be quite large; roughly 10MB per minute of CD quality audio. These can be good for sound bytes on the order of a few seconds. Anything longer will take forever to download and a user may give up waiting.



.mp3 files are compressed .WAV files. They employ MPEG-3 compression to squeeze an audio file down to roughly 1MB per minute of audio sampled from a quality source like a music CD. Thanks to this technique, people can share music, take it with them in personal players, and play them on their webpages. Still however, they can be too large for some people to wait for.



That's just the music standards, and that doesn't even include popular proprietary formats like RealAudio, WindowsMedia, etc.! For video you have .AVI, .WMV (WindowsMedia), .RM (RealPlayer), and .MOV (QuickTime), to name a few. All of these standards are what lead to some websites having links to more than one of these formats. If you plan to embed a media file, you might try to do the same -- assuming you have it in more than one of these formats.



To complicate matters further, there is more than one way to embed media into HTML. This is due to early attempts being surpassed by new techniques, and different browsers trying better ways. What follows is an explanation of each type and why you might choose to use it. All four of these HTML Tags are available to Premium Members only, and only in Profiles. These will not work in the forums, journals, etc.







The tag is just for playing a sound file in the background while browsing your page. It offers no controls for starting or stopping and you can only play the one song. It can play MIDI, WAV, and MP3 music and sound files. It is very simple but does the job. Newer browsers prefer the later tags over this one, but it should be recognized by all browsers even when the newer ones aren't.













The tag basically embeds a small media player into your page and gives you limited control over how to play a file.

I prefer to provide the options and let the user choose to play the sound, how loud, etc. However, if you want the sound to play only in the background, make sure HIDDEN=true, AUTOSTART=true, and AUTOPLAY=true. Here's the details.



HIDDEN="true|false"

This sets whether the plug-in is visible. The default is false, so it will be displayed.



AUTOSTART="true|false"

This sets whether the plug-in will start automatically. (This is not the same as playing the music automatically.) The default is false, so it will not function until the control is clicked.



AUTOPLAY="true|false"

This sets whether the media will play automatically. The default is false, so it will not play until the play button is clicked.



LOOP="true|false"

This sets whether the media plays in an infinite loop. The default is false, so it will play only once.





MIDI Example

(Substitute WAV or MP3 if you have them instead)

<EMBED NAME="YourSong"

SRC="http://www.YourWebsite.com/YourPathTo/YourSong.mid"

HIDDEN="false" AUTOSTART="true" AUTOPLAY="false"

LOOP="true" VOLUME="100%" CONTROLS="all" >



RealPlayer Example

(Note CONTROLS="ImageWindow", as this is how you hide the controls. If you want them active, set this to "all".)

<EMBED NAME="YourSongReal"

SRC="http://www.YourWebsite.com/YourPathTo/YourSong.rm"

TYPE="audio/x-pn-realaudio-plugin"

CONSOLE="YourSongReal" CONTROLS="ImageWindow"

WIDTH="200" HEIGHT="150"

AUTOSTART="true" AUTOPLAY="false" >



QuickTime Example

(Note with this one, the PLUGINSPACE tells your browser where to download the QT player if you don't already have it.)

<EMBED NAME="YourSongReal"

SRC="http://www.YourWebsite.com/YourPathTo/YourSong.mov"

PLUGINSPAGE="http://www.apple.com/quicktime/download/"

CONTROLLER="true" WIDTH="160" HEIGHT="144"

AUTOSTART="true" AUTOPLAY="false" >





&



The tag is really just a full-blown version of the tag. It provides the power to embed virtually any kind of media object or ActiveX control onto a page and provide the ultimate level of control to that object. It is specific to MSIE so it isn't supported by every browser. It you place any HTML text between and tags, that alternate text will be displayed in the case where an OBJECT can't be run. This is why you may find an tag here to cover both bases. An OBJECT may be overkill for playing something like an MP3 file, but it is the best way to play RealPlayer, QuickTime, Flash, or anything that requires a plug-in.



Along with the tag, the tag lets you add options to your object. You only need to include the paramters that you need to control your object. Not all are needed for various media files, and many have defaults that can be skipped.



What makes the tag so powerful is the unique CLASSID identifier codes for each media type. These are the codes that they are registered with on the user's Windows Registry. If the user's PC does not have the ActiveX program (or Netscape plug-in, etc.) to play them, the browser will attempt to install it. The ID field for each OBJECT is just a unique name on your webpage for that object. If you only have one, you don't have to name it; this is used in the case where you might have more than one and they need to have different names. A case for this is if you have a RealPlayer and WindowsMedia file on your page, or you have one for High Bandwidth and one for Dialup, etc.



MIDI Example


CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">


VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.mid" />





WAV Example


CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">


VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.wav" />





MP3 Example

With simple controls turned on.


CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">


VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.mp3" />



















RealPlayer Example

The controls parameter should have the value "ImageWindow" if you don't want the control buttons to show, or "All" if you want all the controls to show.


CLASSID="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">


VALUE="http://www.YourWebsite.com/YourPathTo/YourVideo.rm" />

















WindowsMedia Example


CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">


VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.wmv" />





QuickTime Example


CLASSID="CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"

WIDTH="160" HEIGHT="144">


VALUE="http://www.YourWebsite.com/YourPathTo/YourVideo.mov" />















To see this in use, visit my Portfolio's Slideshow; a sweet option Cancer added to all Portfolios. The music plays on the Slideshow page, and uses an IFRAME to open a page that refreshes after a set number of seconds to display the next photo in my portfolio. Only the contents of the IFRAME refresh, not the IFRAME or the main page itself.



Putting this all together, let's say you wanted to play a MIDI file on your webpage. To cover all bases you will want to use an tag wrapped around a . This should ensure at least one of these tags will be used.




CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">


VALUE="http://www.YourWebsite.com/YourPathTo/YourSong.mid" />




AUTOSTART="false" AUTOPLAY="false" LOOP="true" VOLUME="100%" CONTROLS="all" HIDDEN="false" BORDER="0">





This will work for MIDI, WAV and MP3 files. Anything more sophisticated listed above, then remove the tag, and use one of the above tags wrapped by an tag from above.



Let me wrap up with a reminder... Please do not link to copyrighted music or videos that you do not own the rights to. Just because you found it on the web does not make it legal. You will just open yourself up to a nasty legal barrel of crap if you choose to do so. VR has made the warnings known. If you choose to violate this, you take on the risk. Freedom of choice and extra options require responsibility. There's my 2¢.



Enjoy the Rave,

The Elder Lurker Daniel

COMMENTS

-


 

<HTML> for Mosquitos

19:50 Mar 01 2005
Times Read: 1,190


Click here for a TIFF Cheat Sheet you can print out.




I have had a lot of great comments on my for Whelps article. Many of you have asked for more, and I'm happy to say there is a lot more to share. So, let's take another bite out of HTML.



The first article introduced HTML tags, which are the primary means of adding any markup to a webpage. The other means are special codes in the text for inserting special characters. These are called character entities in geekspeak, but you may know them as extended characters or text symbols that we don't find on a standard keyboard.



These codes are not only useful for adding characters like © and ® to your text, but are mainly for supplying accented letters and international symbols, ala ¿Qué Pasa? They can even make non-Latin language letters available; primarily Greek, as they are used in scientific and mathematical formulae. For example:

A = πr².



Quite possibly the best use of them is for characters we do use often, but thanks to their special use in HTML, like <, >, and &, including them in a post can be tricky and give unexpected results. In these critical cases, it is important to note what the entity codes are for them.



With that, let's talk about what we can do. There are two important differences between entity codes and tags. Like tags, they need a beginning and ending character; however, instead of < and >, we use & and ;. Secondly, case IS important to an entity code, because when using an accented character, Ñ is different than ñ. BUT please note, unlike tags, remarkably, the semi-colon (;) at the end is optional for some web browsers!



So, just demonstrating with a couple entities:

Ñ = Ñ is different than ñ = ñ.

© = © AND © is also legal, but bad form.



For clarity of the reader and to maintain compatibility with all browsers that may deal with this differently, you should always end the code with a semi-colon. I only mention this fact here because it will drive you mad trying to figure out why you might be getting some weird character appearing in your text. For example, you could discover you inadvertantly had "Fishχps" for lunch, when you really had "Fish&chips". (χ is the Greek letter chi and is coded by χ.)



Before listing out the codes, which I've tried to place into useful groups, remember that a) all browsers are not alike, and b) some fonts do not have the symbols you may be wanting. Keep this second point especially in mind here on Vampire Rave, since the font is Verdana by default. While this is a crisp and clean looking font, and it has most of the needed symbols, it still does not have them all. In these cases, the symbols will appear as an empty box, like this: ∉ As a result, I have not listed every possible symbol.



Codes for common characters
SymbolEntity CodeDescription
&&ampersand
<<less-than sign
>>greater-than sign
""(double) quotation mark
ˆˆspacing circumflex accent, carat
˜˜tilde accent





Lower / Upper Case Latin-1 Letters
SymbolEntity CodesDescription
à / Àà / ÀA grave
á / Áá / ÁA acute
â / Ââ / ÂA circumflex
ã / Ãã / ÃA tilde
ä / Ää / ÄA dieresis or umlaut
å / Åå / ÅA ring
æ / Ææ / ÆAE ligature
ç / Çç / ÇC cedilla
è / Èè / ÈE grave
é / Éé / ÉE acute
ê / Êê / ÊE circumflex
ë / Ëë / ËE dieresis or umlaut
ì / Ìì / ÌI grave
í / Íí / ÍI acute
î / Îî / ÎI circumflex
ï / Ïï / ÏI dieresis or umlaut
ð / Ðð / ÐETH
ñ / Ññ / ÑN tilde
ò / Òò / ÒO grave
ó / Óó / ÓO acute
ô / Ôô / ÔO circumflex
õ / Õõ / ÕO tilde
ö / Öö / ÖO dieresis or umlaut
ø / Øø / ØO slash
ù / Ùù / ÙU grave
ú / Úú / ÚU acute
û / Ûû / ÛU circumflex
ü / Üü / ÜU dieresis or umlaut
ý / Ýý / ÝY acute
þ / Þþ / ÞTHORN
ß / ßß / ßsmall sharp s, sz ligature




ISO 8859-1 (Latin-1) Entities
SymbolEntity CodeDescription
  non-breaking space
¡¡inverted exclamation mark
¢¢cent sign
££pound sterling sign
¤¤general currency sign
¥¥yen sign
¦¦or &brkbar;broken vertical bar
§§section sign
¨¨or ¨spacing dieresis or umlaut
©©copyright sign
ªªfeminine ordinal indicator
««left (double) angle quote (guillemet)
¬¬logical not sign
®®registered trademark sign
¯¯ or &hibar;spacing macron (long) accent,
°°degree sign
±±plus-or-minus sign
²²superscript 2
³³superscript 3
´´spacing acute accent
µµmicro sign
paragraph sign, pilcrow sign
··middle dot, centered dot
¸¸spacing cedilla
¹¹superscript 1
ººmasculine ordinal indicator
»»right (double) angle quote (guillemet)
¼¼fraction 1/4
½½or ½fraction 1/2
¾¾fraction 3/4
¿¿inverted question mark




Microsoft Windows Latin-1 Extended Control Characters (Not Standard)
SymbolEntity CodeDescription
ƒƒsmall italic f, function of, florin
…… or &ldots;low horizontal ellipsis
††dagger mark
‡‡double dagger mark
‰‰per thousand (mille) sign
ŠŠcapital S caron or hacek
‹‹left single angle quote mark (guillemet)
ŒŒcapital OE ligature
‘‘left single quotation mark,
’’right single quote mark
““left double quotation mark,
””right double quote mark
••round filled bullet
–– or &endash;en dash
—— or &emdash;em dash
˜˜small spacing tilde accent
™™trademark sign
ššsmall s caron or hacek
››right single angle quote mark (guillemet)
œœsmall oe ligature
ŸŸcapital Y dieresis or umlaut




Other Common Symbols (Not Standard)
SymbolEntity CodeDescription
€€euro sign
◊◊hollow diamond suit, lozenge
♠♠black spade suit
♣♣filled club suit, shamrock
♥♥filled heart suit, valentine
♦♦filled diamond suit




Mathematical Symbols
SymbolEntity CodeDescription
÷÷divide or subtract, depending on culture
⁄⁄fraction slash
±±plus-or-minus (+/-)
−−minus sign
··a centered dot
××multiply
⊕⊕circled plus, direct sum
∧∧logical and, `wedge'
∨∨logical or, vee, vel
∩∩intersection
∪∪union
<<less than
>>greater than
≤≤less than or equal to
≥≥greater than or equal to
≠≠not equal to
≡≡identical to
≈≈almost equal to, asymptotic to
∼∼tilde operator, varies with, similar to




Set Relations
SymbolEntity CodeDescription
⊂⊂is a subset of
⊃⊃is a superset of
⊆⊆is a subset of or equal to
⊇⊇is a superset of or equal to
∈∈is an element of
∋∋contains as member




Arrows
SymbolEntity CodeDescription
←←left arrow
→→right arrow
↑↑up arrow
↓↓down arrow
↔↔horizontal arrows
⇒⇒double-lined right arrow
⇔⇔double-lined horizontal arrow ("if and only if" aka "iff")




Unary operators
SymbolEntity CodeDescription
¬¬logical not
∀∀for all
∂∂partial differential
∃∃there exists
∇∇nabla, backward difference
∏∏n-ary product, product sign
∑∑n-ary sumation, sum sign
√√square root, radical sign
∫∫integral
∴∴therefore




Miscellaneous mathematical symbols
SymbolEntity CodeDescription
∞∞infinity
∠∠angle
⊥⊥perpendicular
¹¹superscript 1
²²superscript 2
³³superscript 3
¼¼a quarter
½½a half
¾¾three quarters




Greek letters
SymbolEntity CodeDescription
α / Αα / ΑAlpha
β / Ββ / ΒBeta
γ / Γγ / ΓGamma
δ / Δδ / ΔDelta
ε / Εε / ΕEpsilon
ζ / Ζζ / ΖZeta
η / Ηη / ΗEta
θ / Θθ / ΘTheta
ι / Ιι / ΙIota
κ / Κκ / ΚKappa
λ / Λλ / ΛLambda
μ / Μμ / ΜMu
ν / Νν / ΝNu
ξ / Ξξ / ΞXi
ο / Οο / ΟOmicron
π / Ππ / ΠPi
ρ / Ρρ / ΡRho
σ / Σσ / ΣSigma
τ / Ττ / ΤTau
υ / Υυ / ΥUpsilon
φ / Φφ / ΦPhi
χ / Χχ / ΧChi
ψ / Ψψ / ΨPsi
ω / Ωω / ΩOmega




Let me wrap up with a reminder... Always copy your posting somewhere before posting on VR! Too many people have lost an incredibly witty, long-winded post to the fickleness of the internet. This is NOT a VR problem, but a security issue imposed by the internet itself. It is just a really good idea to write your profile/message/journal entry offline in Notepad or some other editor that you can save your file, then copy and paste it here.



Enjoy the Rave,

The Elder Lurker Daniel

COMMENTS

-





REAL VAMPIRES LOVE VAMPIRE RAVE
© 2004 - 2024 Vampire Rave. 
All Rights Reserved.
Vampire Rave is a member of 
Page generated in 0.0594 seconds.
X
Username:

Password:
I agree to Vampire Rave's Privacy Policy.
I agree to Vampire Rave's Terms of Service.
I agree to Vampire Rave's DMCA Policy.
I agree to Vampire Rave's use of Cookies.
•  SIGN UP •  GET PASSWORD •  GET USERNAME  •
X